<template>
  <div>
    <Header/>
    <div class="flex-border">
      <!-- <div>
        <br>
        <img src="@/assets/images//picture02.png" alt="">
      </div> -->
      <div>
        <br>
        <el-card class="box-card">
          <div class="menu">
            <div> {{ pageTitle }}</div>
          </div>
          <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">进口</el-menu-item>
            <el-menu-item index="2">出口</el-menu-item>
          </el-menu> -->
          <br>
          <el-form label-width="80px">
            <el-form-item label="账号：">
              <el-input
                v-model="loginInfo.user_name"
                placeholder="请输入账号"/>
            </el-form-item>
            <el-form-item label="密码：">
              <el-input
                v-model="loginInfo.password"
                name="password"
                type="password"
                placeholder="请输入密码"/>
            </el-form-item>
            <div class="img-content">
              <img
                :src="verifyCodeSrc"
                title="点击更换验证码图片"
                style="margin-bottom: 20px; "
                class="clickable;"
                @click="verifyCodeSeed++"
              >
            </div>
            <el-form-item label="验证码：">
              <el-input
                v-model="loginInfo.verify_code"
                placeholder="请输入验证码"/>
            </el-form-item>

            <div class="flex-center">
              <div style="padding-bottom:5px;">
                <el-link
                  target="_blank"
                  style="float:right; padding-left: 10px;"
                  type="warning"
                  @click="register">忘记密码？</el-link>
                <el-link
                  target="_blank"
                  style="float:right;"
                  type="warning"
                  @click="register">注册</el-link>
              </div>
              <el-button
                type="warning"
                @click="login">登  录</el-button>
            </div>
          </el-form>
        </el-card>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
import Header from "../frame/loginheader.vue";
import Footer from "../frame/footer.vue";
import registerRoute from "@/router/modules";

export default {
    components: {
        Header,
        Footer
    },
    props: {
        identity: {
            type: String,
            default: "user"
        }
    },
    data: () => (
        {
            loginInfo: {
            },
            verifyCodeSeed: 0,
        }
    ),
    computed: {
        verifyCodeSrc() {
            return process.env.VUE_APP_API_BASE + "/user/login/verify?" + this.verifyCodeSeed;
        },
        pageTitle() {
            switch (this.identity) {
            case "user":
                return "采购会员登录";
            case "admin":
                return "供货商登录";
            default:
                return "";
            }
        }
    },
    methods: {
        login() {
            switch (this.identity) {
            case "user":
                console.log(this.loginInfo)
                this.$store
                    .dispatch("login/login", this.loginInfo)
                    .then(data => {
                        sessionStorage.setItem("token", "loginsuccess");
                        sessionStorage.setItem("userName", data.user.user_name);
                        const userInfo = {
                            user_name: data.user.user_name,
                            user_id: data.user.id
                            // 其余信息待补充
                        };
                        sessionStorage.setItem("USER_INFO", JSON.stringify(userInfo));

                        this.$store.commit("SET_USER_INFO", userInfo);
                        this.navigate(this.identity);
                    });
                break;
            case "admin":
                this.$store
                    .dispatch("login/adminLogin", this.loginInfo)
                    .then(data => {
                        sessionStorage.setItem("token", "loginsuccess");
                        sessionStorage.setItem("adminName", data.admin.admin_name);
                        const adminInfo = {
                            admin_name: data.admin.admin_name,
                            admin_id: data.admin.id
                        };
                        sessionStorage.setItem("ADMIN_INFO", JSON.stringify(adminInfo));

                        this.$store.commit("SET_ADMIN_INFO", adminInfo);
                        this.navigate(this.identity);
                    });
                break;

            default:
                break;
            }
        },
        register() {
            this.$router.push("/register");
        },
        navigate(identity) {
            this.$store.commit("SET_IDENTITY", identity);
            let routes = [];
            let navRouteName = "";
            switch (identity) {
            case "user":
                routes = registerRoute.getUserRoute();
                navRouteName = "HomePage";
                break;
            case "admin":
                routes = registerRoute.getAdminRoute();
                navRouteName = "AdminOrder";
                break;
            default:
                break;
            }
            this.$store.commit("SET_AUTH_ROUTES", routes);
            this.$router.replace({ name: navRouteName });
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.img-content{
    display: inline-block;
    vertical-align: middle;
  }
.flex-border {
  display: flex;
  flex-direction: row;
  min-height: 550px;
  justify-content: space-around;
  border-top: 1px rgb(238, 173, 77) solid;
}
span {
  font-size: 12px;
}
.item {
  margin-top: -10px;
}
.box-card {
  width: 400px;
}
.flex-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
.menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-weight: bolder;
}
.menu div {
  margin: 0 10px;
  padding: 10px 40px;
  border-bottom: 1px #000 solid;
}
</style>
